<!-- 某个记录的跟进记录列表，目前主要用于 CRM 客户、商机等详情界面 -->
<template>
  <!-- 操作栏 -->
  <el-row
    justify="center"
    style="width: 100%; padding: 0 10px; justify-content: space-between; align-items: flex-start"
    :class="['items-center', { rowheight: list.length == 0 }]"
  >
    <el-select v-model="queryParams.type" placeholder="请选择跟进类型" @change="selectFollowType">
      <el-option v-for="item in followupOption" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <el-button type="primary" @click="openForm" style="margin: 0">+ 写跟进</el-button>
  </el-row>
  <!-- 列表 -->
  <div v-for="activity in list" :key="activity.id" class="mt-10px ml-10px mr-10px">
    <ContentWrap shadow="always">
      <div class="flex items-center justify-between">
        <div class="text-12px text-[var(--secondary-text-color)] flex justify-left items-center">
          <span class="mr-10px">{{ activity.type == 0 ? '系统外呼' : activity.typeName }}</span>
          <el-tag type="warning" size="small" v-if="activity.type == 1 && !activity.callStatus"
            >未接通</el-tag
          >
        </div>
        <div class="text-12px">
          <!-- <el-tag type="primary">{{ activity.type == 0 ? '系统外呼' : activity.typeName }}</el-tag> -->
          {{ activity.createTime }}
        </div>
      </div>
      <p class="bg-#eFF3F6 p-8px text-13px" v-if="activity.type != 0">{{ activity.content }}</p>
      <div
        class="mt-15px"
        style="display: flex; justify-content: space-between; align-items: center"
        v-if="activity.callLogId && activity.callRecordUrl"
      >
        <AudioPlayers :url="activity.callRecordUrl" />
        <div style="cursor: pointer" @click="showDiag(activity)">
          <el-tooltip content="语音转文字" placement="bottom" effect="light">
            <svg
              t="1726627027730"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6218"
              width="24"
              height="24"
            >
              <path
                d="M833.79 322.4H713.67a22.69 22.69 0 0 0-17.95 17.95c-2.44 12.41 5.54 24.38 17.95 26.81h121c34.79 0.22 62.94 28.37 63.16 63.16v421.29c0 35.24-28.59 63.61-63.6 63.61H412.49c-35.24-0.22-63.38-29.03-63.16-64.04V686.31c-1.77-9.08-8.87-15.96-17.95-17.95-12.41-2.44-24.38 5.54-27.04 17.95v164.88c0 60.06 48.76 108.81 108.81 108.81h420.41c60.06 0 108.81-48.75 108.81-108.81V430.34c-0.21-59.84-48.97-107.94-108.58-107.94z"
                p-id="6219"
              ></path>
              <path
                d="M751.35 855.17V526.29c-1.11-7.09-6.87-12.86-13.96-13.96-9.31-1.55-17.95 4.65-19.5 13.96v327.55c0.22 9.08 7.54 16.4 16.62 16.62 8.41 0 15.95-6.64 16.84-15.29zM633 805.08c9.31 0 16.84-7.32 17.06-16.62V593c-1.11-7.09-6.87-12.86-13.96-13.96-9.31-1.55-18.17 4.65-19.5 13.96v195.47c0 9.08 7.32 16.17 16.4 16.61zM845.75 739.49v-97.73c-1.11-7.32-6.87-12.86-13.96-13.96-9.31-1.55-17.95 4.87-19.5 13.96v97.73c0.22 9.08 7.54 16.4 16.62 16.62 9.09 0 16.62-7.32 16.84-16.62zM295.48 343.02h88.87l-44.32-87.99zM518.21 641.98v97.73c0.22 9.08 7.54 16.4 16.62 16.62 9.31 0 16.84-7.32 17.06-16.62v-97.73c0.22-1.77 0.22-3.77 0-5.54-1.55-9.31-10.19-15.51-19.5-13.96-9.31 1.32-15.74 10.19-14.18 19.5z"
                p-id="6220"
              ></path>
              <path
                d="M598.43 505.9v-367c0-41.44-33.46-74.9-74.91-74.9H156.53c-41.44 0-74.91 33.46-74.91 74.9v366.55c0 41.44 33.46 74.9 74.91 74.9h366.55c41.44 0.24 75.13-33 75.35-74.45z m-121.89-38.34c-3.55 1.77-7.54 2.66-11.75 2.66-9.97 1.11-19.72-3.99-24.6-12.63l-30.58-64.04H269.77l-32.36 64.04c-4.21 13.52-18.62 20.83-31.91 16.62-13.52-4.21-20.83-18.62-16.62-31.91 0.89-2.66 2.22-5.32 3.77-7.54l124.1-247.32c7.76-12.41 24.16-16.18 36.35-8.42 3.32 2.22 6.21 5.1 8.42 8.42L487.4 434.32c5.98 12.41 1.11 26.82-10.86 33.24z"
                p-id="6221"
              ></path>
            </svg>
          </el-tooltip>
        </div>
      </div>
      <!-- 附件图片列表 -- 开始 -->
      <div v-if="activity.picUrls">
        <el-image
          style="width: 50px; height: 50px"
          :src="url"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          fit="cover"
          v-for="(url, index) in activity.picUrls"
          :key="'url' + index"
          :initial-index="index"
          :preview-src-list="activity.picUrls"
        />
      </div>
      <!-- 附件图片列表 -- 结束 -->
      <!-- 附件文件列表 -- 开始 -->
      <div v-if="activity.fileUrls">
        <span
          class="mb-10px block flex justify-between rd-2px bg-#eFF3F650 p-8px"
          v-for="(url, index) in activity.fileUrls"
          :key="'url' + index"
        >
          <span>附件</span>
          <el-link :icon="Download" :href="url"></el-link>
        </span>
      </div>
      <!-- 附件文件列表 -- 结束 -->
      <!-- <el-divider /> -->
      <div class="h-1px bg-#eFF3F6 mt-10px mb-4px w-full"></div>
      <!-- 关联联系人  开始 -->
      <div
        class="text-12px text-[var(--secondary-text-color)]"
        v-if="bizType === BizTypeEnum.CRM_CUSTOMER && activity.contacts.length"
        >关联联系人：<el-link
          v-for="contact in activity.contacts"
          :key="`key-${contact.id}`"
          :underline="false"
          type="primary"
          @click="openContactDetail(contact.id)"
          class="ml-5px"
        >
          {{ contact.name }}
        </el-link></div
      >
      <!-- 关联商机 开始 -->
      <div
        v-if="activity.businesses.length"
        class="mt-10px text-12px text-[var(--secondary-text-color)]"
        >关联商机：<el-link
          v-for="business in activity.businesses"
          :key="`key-${business.id}`"
          :underline="false"
          type="primary"
          @click="openBusinessDetail(business.id)"
          class="ml-5px"
        >
          {{ business.name }}
        </el-link></div
      >
      <p class="text-12px text-[var(--secondary-text-color)]">跟进人：{{ activity.creatorName }}</p>
      <p v-if="activity.nextTime" class="text-12px text-[var(--secondary-text-color)]"
        >下次联系时间：{{ formatDate(activity.nextTime) }}</p
      >
    </ContentWrap>
  </div>
  <el-empty description="暂无跟进记录" v-if="list.length == 0"></el-empty>
  <!-- 分页 -->
  <div style="height: 100px">
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      :pager-count="3"
      layout="total,prev, pager, next"
      @pagination="getList"
    >
      <template #total>
        <span>总条目数: {{ total }}</span>
      </template>
    </Pagination>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <FollowUpRecordForm ref="formRef" @success="getList" />
  <!-- 详情 -->
  <DetailDes ref="detailRef" />
</template>

<script lang="ts" setup>
import { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup'
import FollowUpRecordForm from './FollowUpRecordForm.vue'
import { BizTypeEnum } from '@/api/crm/permission'
import { formatDate } from '@/utils/public'
import { Download } from '@element-plus/icons-vue'
import DetailDes from '@/views/call/record/detail.vue'
import { getFollowTypeConfigList } from '@/api/crm/module/index'

/** 跟进记录列表 */
defineOptions({ name: 'FollowUpRecord' })
const props = defineProps({
  bizType: Number,
  bizId: Number,
  isPool: Boolean,
  moduleId: Number
})

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<FollowUpRecordVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  bizType: props.bizType,
  bizId: props.bizId,
  type: ''
})
const followupOption = ref([
  {
    name: '全部',
    id: ''
  },
  {
    name: '系统外呼',
    id: '0'
  }
])
const selectFollowType = () => {
  queryParams.pageNo = 1
  getList()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await FollowUpRecordApi.getFollowUpRecordPage(queryParams)
    data.list.map((item) => {
      item.createTime = formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const getFollowList = async () => {
  const data = await getFollowTypeConfigList({ moduleId: props.moduleId })
  followupOption.value = [...followupOption.value, ...data]
}
/** 添加/修改操作 */
const formRef = ref<InstanceType<typeof FollowUpRecordForm>>()
const openForm = () => {
  formRef.value?.open(props.bizType, props.bizId, props.moduleId)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await FollowUpRecordApi.deleteFollowUpRecord(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 打开联系人详情 */
const { push } = useRouter()
const openContactDetail = (id: number) => {
  push({ name: 'CrmContactDetail', params: { id } })
}

/** 打开商机详情 */
const openBusinessDetail = (id: number) => {
  push({ name: 'CrmBusinessDetail', params: { id } })
}

const bizName = computed(() => {
  switch (props.bizType) {
    case BizTypeEnum.CRM_CUSTOMER:
      return '客户'
    case BizTypeEnum.CRM_CONTACT:
      return '联系人'
    case BizTypeEnum.CRM_CLUE:
      return '线索'
    case BizTypeEnum.CRM_BUSINESS:
      return '商机'
    case BizTypeEnum.CRM_CONTRACT:
      return '合同'
    case BizTypeEnum.CRM_RECEIVABLE:
      return '回款'
    case BizTypeEnum.CRM_RECEIVABLE_PLAN:
      return '回款计划'
    case BizTypeEnum.CRM_PRODUCT:
      return '产品'
    default:
      break
  }
})
const detailRef = ref(null)
/*显示语音转文字组件*/
const showDiag = (item) => {
  detailRef.value.open(item.callLogId)
}
watch(
  () => props.bizId,
  (val) => {
    queryParams.bizType = props.bizType
    if (val) {
      queryParams.bizId = val
      getList()
    }
  },
  { immediate: true, deep: true }
)
watch(
  () => props.moduleId,
  (val) => {
    if (val) getFollowList()
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flowNum {
  color: #fff;
  background: #0052cc;
  border-radius: 4px;
  padding: 4px;
  font-size: 16px;
}
:deep(.el-descriptions__label) {
  width: 100px;
  text-align: right;
}

.rowheight {
  height: 400px;
}

.el-timeline {
  padding-top: 10px;
  padding-right: 10px;
}

.contact {
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 5px 1px #eff3f6;

  .time-title {
    padding: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #50c9f9;
    border-bottom: 1px solid #eff3f6;
  }

  .mar-box {
    display: flex;
    margin: 5px 0;
    align-items: center;
    align-items: flex-start;

    .mar-title {
      width: 100px;
      margin-right: 6px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      text-align: left;
    }

    span {
      font-size: 13px;
      color: #333;
    }
  }
}
.noFollow,
.selectFollow {
  font-size: 14px;
  border: 1px solid #c8c9cc;
  background-color: #f4f4f5;
  border-radius: 3px;
  padding: 2px 4px;
  color: #909399;
  cursor: pointer;
  margin-right: 20px;
}
.selectFollow {
  background: #0052cc !important;
  color: #fff !important;
  border-color: #0052cc !important;
}
</style>
